<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>管理后台</title>
  <link href="/static/img/favicon.png" rel="icon">
  <link rel="stylesheet" href="/static/vendor/bootstrap.min.css">
  <link rel="stylesheet" href="/static/vendor/bootstrap-icons/bootstrap-icons.css">
  <link rel="stylesheet" href="/static/css/style.css">
  <script src="/static/vendor/bootstrap.bundle.min.js"></script>
  <script src="/static/vendor/jquery.js"></script>
  <script src="/static/vendor/echarts.min.js"></script>
  <style>
    .logo {
      text-decoration: none;
      font-size: 20px;
      color: #012970;
    }

    .sidebar-nav .nav-link span {
      margin-left: 10px;
    }
  </style>
</head>

<body>
  <!-- 顶部导航栏 -->
  <header id="header" class="header fixed-top d-flex align-items-center">
    <div class="d-flex align-items-center justify-content-between">
      <div class="logo d-flex align-items-center">景点数据管理后台</div>
      <i class="bi bi-list toggle-sidebar-btn"></i>
    </div>
    <nav class="header-nav ms-auto">
      <ul class="d-flex align-items-center">
        <li class="nav-item dropdown pe-3">
          <a class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
            <img src="{{ request.session.avatar }}" alt="Profile" class="rounded-circle">
            <span class="d-none d-md-block dropdown-toggle ps-2">{{ request.session.username }}</span>
          </a>
          <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
            <li class="dropdown-header">
              <h6>{{ request.session.username }}</h6>
              <span>{{ request.session.textarea }}</span>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li>
              <a class="dropdown-item d-flex align-items-center" href="/app/changeUserInfo">
                <i class="bi bi-person"></i><span>个人信息</span>
              </a>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li>
              <a class="dropdown-item d-flex align-items-center" href="/app/logout">
                <i class="bi bi-box-arrow-right"></i><span>退出登录</span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </header>

  <!-- 左侧导航栏 -->
  <aside id="sidebar" class="sidebar">
    <ul class="sidebar-nav" id="sidebar-nav">
      <li class="nav-item">
        <a class="nav-link collapsed" href="/app/index"><span>首页</span></a>
      </li>

      <li class="nav-heading">个人信息</li>
      <li class="nav-item">
        <a class="nav-link collapsed" href="/app/changeUserInfo"><span>修改信息</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link collapsed" href="/app/changePassword"><span>修改密码</span></a>
      </li>

      <li class="nav-heading">景点数据集</li>
      <li class="nav-item">
        <a class="nav-link collapsed" href="/app/tableData"><span>数据列表</span></a>
      </li>

      <li class="nav-heading">数据可视化</li>
      <li class="nav-item">
        <a class="nav-link collapsed" href="/app/cityChar"><span>城市和景点等级分析</span></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link collapsed" href="/app/rateChar"><span>评分情况分析</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link collapsed" href="/app/priceChar"><span>价格销量分析</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link collapsed" href="/app/commentsChar"><span>评论分析</span></a>
      </li>

      <li class="nav-heading">推荐功能</li>
      <li class="nav-item">
        <a class="nav-link collapsed" href="/app/recommendation"><span>推荐算法</span></a>
      </li>

      <li class="nav-heading">词云图</li>
      <li class="nav-item">
        <a class="nav-link collapsed" href="/app/detailIntroCloud"><span>详情简介词云图</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link collapsed" href="/app/commentContentCloud"><span>评论内容词云图</span></a>
      </li>
    </ul>
  </aside>

  <!-- 内容主体 -->
  <main id="main" class="main">
    {% block content %} {% endblock %}
  </main>

  <!-- 底部 -->
  <footer id="footer" class="footer">
    <div class="copyright">Copyright &copy; 2025 景点数据管理后台</div>
    <div class="credits"></div>
  </footer>

  <!-- 返回顶部 -->
  <a href="#" class="back-to-top d-flex align-items-center justify-content-center">
    <i class="bi bi-arrow-up-short"></i>
  </a>

  <script src="/static/js/main.js"></script>
  <script>
    // 左侧菜单选中
    let url = location.pathname.replace(/\/$/, "")
    $('a[href="' + url + '"]').removeClass('collapsed');
  </script>
  <!-- js脚本 -->
  {% block js %} {% endblock %}
</body>

</html>